<template>
  <div class="containerTwo">
    <el-header class="header" style="height:80px;min-width: 500px;">
          <div class="header-left">
            <i v-show="!isCollapse" class="el-icon-s-fold" @click="toggle" ></i>
            <i v-show="isCollapse" class="el-icon-s-unfold" @click="toggle" ></i>
            <!-- 面包屑导航 -->
            <el-breadcrumb v-if="$route.meta" separator-class="el-icon-arrow-right" style="margin-left:15px">
              <el-breadcrumb-item v-for="item in $route.meta.thumb" :key="item" :to="item.split(':')[1]">{{ item.split(':')[0] }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="header-right">
            <img src="../assets/logo.svg" alt="" style="border-radius: 50%; width: 30px;">
            <template >
              <span style="margin-left:10px;font-size: 14px;">登录</span> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <span style="font-size:14px">注册</span>
            </template>
          </div>


          <!-- <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="$router.push('/')">
            <el-tab-pane
              v-for="(item, index) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
              
            >
            </el-tab-pane>
          </el-tabs> -->
        </el-header>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isCollapse:false,
      }
    },
    methods: {
      toggle() {
        // this.isCollapse = !this.isCollapse
        this.$emit('parentevent',this.isCollapse)
        this.isCollapse = !this.isCollapse
      }
    },
  }
</script>

<style lang="scss" scoped>
.containerTwo{
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #fff;
}
.header{
  // position: sticky;
  // top: 0;
  // left: 0;
  
  display: flex;
  // align-items: center;
  justify-content: space-between;
  height: 240px;
  padding: 25px;
  box-shadow: 0 0 5px 3px #999;
  .header-left{
    margin-left: 1rem;
    display: flex;
    align-items: center;
    >i{
      cursor: pointer;
    }
  }
  .header-right{
    margin-right: 1rem;
    display: flex;
    align-items: center;
  }
}
</style>